<template>
  <el-card class="content_card">
    <div class="title-box">
      <p>分类</p>
    </div>
    <div class="classfiy">
      <div class="classfiy-buttons" v-for="item in classList" :key="item.name">
        <el-badge :value="item.count" class="item">
          <el-button
            :class="{ activeBtn: isActive == item.id }"
            type="success"
            round
            @click="getArticlesByCateId(item.id)"
            >{{ item.cateName }}</el-button
          >
        </el-badge>
      </div>
    </div>
    <div class="timeLine">
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in articleList"
          :key="index"
          :timestamp="activity.publishTime"
        >
          <div class="timeLine-item" @click="toContent(activity.id)">
            {{ activity.title }}
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script>
import { GetArtiCates, GetArticlesByCateId } from "@/api/blogClassfiy";
export default {
  data() {
    return {
      classList: [],
      articleList: [],
      isActive: null,
    };
  },
  mounted() {
    this.getArtiCates();
    this.handleActiveCateByRoute();
    window.addEventListener("load", () => {
      this.refreshUrl();
    });
  },
  // destroyed() {
  //   //进行监听销毁
  //   window.removeEventListener("load");
  // },
  methods: {
    async getArtiCates() {
      const { code, data } = await GetArtiCates();
      try {
        if (code === 200) {
          this.classList = data;
          const id = data[0]?.id;
          window.localStorage.firstId = JSON.stringify(id);
          if (data.length && !this.isActive) {
            this.getArticlesByCateId(parseInt(id));
            this.isActive = id;
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleActiveCateByRoute() {
      const cateId = parseInt(this.$route?.query?.cateId);
      if (cateId) this.getArticlesByCateId(cateId);
    },
    async getArticlesByCateId(id) {
      if (!id) return;
      this.isActive = id;
      window.localStorage._cateId = id;
      const { code, data } = await GetArticlesByCateId(id);
      try {
        if (code == 200) {
          this.articleList = data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    refreshUrl() {
      const cateId = this.$route?.query?.cateId;
      const firstId = parseInt(window.localStorage.firstId);
      if (cateId) {
        this.getArticlesByCateId(firstId);
        this.$router.push({ name: "BlogClassfiy" });
      }
    },
    toContent(id) {
      this.$router.push({ name: "BlogContent", query: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
@import url(@/assets/css/globalColor.less);
.classfiy {
  width: 100%;
  margin: 0 40px;
  &-buttons {
    // width: 100%;
    display: inline-block;
  }
  .el-badge {
    margin-right: 20px;
    margin-bottom: 10px;
    .el-button {
      background: @theme-color;
      border: @theme-color;
      &:hover,
      &:focus {
        background: rgb(118, 196, 199);
      }
    }
    .activeBtn {
      background: rgb(118, 196, 199);
    }
  }
}
.timeLine {
  margin-top: 20px;
  &-item {
    cursor: pointer;
  }
}

@media screen and (max-width: 1200px) {
  :deep(.el-card__body) {
    padding: 15px;
  }
  .timeLine {
    .el-timeline {
      padding-left: 15px;
    }
  }
  .classfiy {
    margin: 0;
    :deep(.el-button.is-round) {
      padding: 10px 15px;
    }
  }
}
</style>